<template>
  <div class="other-evaluation-container">
    <div class="module-title-container">
      <div class="module-title">他人评价</div>
    </div>
    <div class="evaluation-list-container">
      <div class="left-wrapper">
        <div class="evaluation-box left-box">
          <div class="evaluation-content">
            耀华是一个非常有创造力的人，会大胆提出AI大模型在项目中的落地场景。他提出的方案不仅新颖独特，还具有很强的可行性，有效推动了项目在智能化方向的进展，为团队带来了新的思路和活力。
          </div>
          <div class="evaluation-name-wrapper">
            <div class="evaluation-avatar">
              <img :src="workmateIcon" alt="evaluation-avatar" />
            </div>
            <div class="evaluation-name">刘科</div>
          </div>
          <div class="background-image">
            <img :src="backgroundImage" alt="" />
          </div>
        </div>
      </div>
      <div class="right-wrapper">
        <div class="right-row1">
          <div class="evaluation-box right-box1">
            <div class="evaluation-content">
              华仔在工作中尽职尽责，对UI的还原度非常高，响应式设计与动效设计都很灵动，开发速度很快，和他一起工作很愉快。
            </div>
            <div class="evaluation-name-wrapper">
              <div class="evaluation-avatar">
                <img :src="workmateIcon" alt="evaluation-avatar" />
              </div>
              <div class="evaluation-name">陈俊</div>
            </div>
          </div>
          <div class="evaluation-box right-box2">
            <div class="evaluation-content">
              华仔的代码简洁工整，逻辑清晰，注释详细，符合项目的代码规范。
            </div>
            <div class="evaluation-name-wrapper">
              <div class="evaluation-avatar">
                <img :src="workmateIcon" alt="evaluation-avatar" />
              </div>
              <div class="evaluation-name">曾伟涛</div>
            </div>
          </div>
        </div>
        <div class="right-row2">
          <div class="evaluation-box right-box3">
            <div class="evaluation-content">
              师兄在实验室中带我学习，我也很幸运地在他的带领下参了很多省级、国家级的比赛，平时也经常和我交流一些最新的技术栈，跟着他我学到了很多。
            </div>
            <div class="evaluation-name-wrapper">
              <div class="evaluation-avatar">
                <img :src="workmateIcon" alt="evaluation-avatar" />
              </div>
              <div class="evaluation-name">吴铭辉</div>
            </div>
          </div>
          <div class="evaluation-box right-box4">
            <div class="evaluation-content">
              耀华的成长速度很快，实习期进步飞快，很快从小白实习生变成了前端开发工程师，还能独立承担复杂模块的开发工作。
            </div>
            <div class="evaluation-name-wrapper">
              <div class="evaluation-avatar">
                <img :src="workmateIcon" alt="evaluation-avatar" />
              </div>
              <div class="evaluation-name">张梓康</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const workmateIcon =
  "https://person-web.obs.cn-south-1.myhuaweicloud.com/workmate/candidate_male.png";
const backgroundImage =
  "https://person-web.obs.cn-south-1.myhuaweicloud.com/workmate/liuke.png";
const evaluationList = [
  {
    name: "组长-刘科",
    content:
      "耀华是一个非常有创造力的人，会大胆提出AI大模型在项目中的落地场景。他提出的方案不仅新颖独特，还具有很强的可行性，有效推动了项目在智能化方向的进展，为团队带来了新的思路和活力。",
  },
  {
    name: "同事-陈俊",
    content:
      "华仔在工作中尽职尽责，对UI的还原度非常高，响应式设计与动效设计都很灵动，开发速度很快，和他一起工作很愉快。",
  },
  {
    name: "同事-曾伟涛",
    content: "华仔的代码简洁工整，逻辑清晰，注释详细，符合项目的代码规范。",
  },
  {
    name: "Mentor-张梓康",
    content:
      "耀华的成长速度很快，实习期进步飞快，很快从小白实习生变成了前端开发工程师，还能独立承担复杂模块的开发工作。",
  },
  {
    name: "师弟-吴铭辉",
    content:
      "师兄在实验室中带我学习，我也很幸运地在他的带领下参了很多省级、国家级的比赛，平时也经常和我交流一些最新的技术栈，跟着他我学到了很多。",
  },
];

onMounted(() => {
  // 创建Intersection Observer实例
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry, index) => {
        if (entry.isIntersecting) {
          // 当元素进入视窗时，添加动画类
          entry.target.classList.add("animate-in");
          entry.target.style.animationDelay = `${index * 0.3 + 0.4}s`;
        } else {
          // 当元素离开视窗时，移除动画类，以便下次进入时可以再次播放
          entry.target.classList.remove("animate-in");
        }
      });
    },
    {
      threshold: 0.1, // 当10%的元素可见时触发
    }
  );

  // 观察所有标题容器
  setTimeout(() => {
    const evaluationContainers = document.querySelectorAll(".evaluation-box");
    evaluationContainers.forEach((container) => {
      observer.observe(container);
    });
  }, 100); // 延迟100ms确保DOM已完全渲染
});
</script>

<style lang="scss" scoped>
.other-evaluation-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  //   background-color: #1d1d1f;
  background-color: #fff;
  padding: 100px 150px;
}

.module-title {
  //   color: #d5dceb !important;
}

.evaluation-list-container {
  display: flex;
  flex-direction: row;
  gap: 30px;
  margin-top: 50px;

  .evaluation-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 30px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    opacity: 0;

    // 当元素进入视窗时添加的动画类
    &.animate-in {
    //   animation: popIn 1s ease-out forwards;
      animation: popIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;

      @keyframes popIn {
        0% {
          transform: scale(0.95) translateY(40px);
          opacity: 0;
        }

        100% {
          transform: scale(1) translateY(0);
          opacity: 1;
        }
      }
    }

    .evaluation-name-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
    }

    .evaluation-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .evaluation-name {
      font-size: 16px;
    }

    .evaluation-position {
      margin-left: 10px;
    }

    .evaluation-content {
      font-size: 28px;
      font-weight: bold;
      line-height: 1.5;
      text-align: justify;
    }

    .background-image {
      position: absolute;
      bottom: 10px;
      right: 20px;
      width: 220px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .left-box {
    // background-color: #fff;
    background-color: #1d1d1f;
    // background-image: url(https://winrobot-pub-a-oss.yingdao.com/static/xybot-front-homepage-v3/online/241/static/img_put_up_bg.9c89a921.png) ;
    color: #fff;
    width: 500px;
    height: 550px;
  }

  .right-box1 {
    color: #fff;
    background: linear-gradient(to bottom right, #22b5af 0%, #63d1d0 100%);
    width: 600px;
    flex-shrink: 0;
  }

  .right-box2 {
    background: linear-gradient(to bottom, #ffd737 0%, #ffe786 100%);
    width: 100%;
  }

  .right-box3 {
    background: linear-gradient(to bottom left, #9b4aff 0%, #a768ff 100%);
    color: #fff;
    width: 900px;

    .evaluation-content {
      font-size: 24px;
    }
  }

  .right-box4 {
    background: linear-gradient(to bottom right, #4468fd 0%, #4a86ff 100%);
    color: #fff;
    width: 100%;

    .evaluation-content {
      font-size: 24px;
    }
  }

  .right-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 30px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
  }

  .right-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
  }

  .right-row1 {
    display: flex;
    width: 100%;
    gap: 30px;
    height: 250px;
  }

  .right-row2 {
    display: flex;
    width: 100%;
    gap: 30px;
    height: 100%;
  }
}
</style>
